<template>
  <div class="docking-info">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>对接信息</span>
        </div>
      </template>

      <el-form :model="info" label-width="120px" class="info-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商户编号">
              <el-input v-model="info.mchNO" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="加密方式">
              <el-input v-model="info.encryption" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="登录商户地址">
              <el-input v-model="info.address" readonly />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="下单地址">
              <el-input v-model="info.placeOrderUrl" readonly />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="查询地址">
              <el-input v-model="info.searchOrderUrl" readonly />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="查余额地址">
              <el-input v-model="info.searchBalanceUrl" readonly />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="下载回调地址">
              <el-input v-model="info.callbackUrl" readonly />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="在线文档">
              <el-input v-model="info.dockingUrl" readonly />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="密钥">
              <el-input v-model="info.privateKey" :rows="3" readonly />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item>
              <el-button type="primary" @click="copyKey"> 一键复制 </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { getDockingInfo } from "@/api/system";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";

// 对接信息数据
const info = ref<{
  address: string;
  callbackUrl: string;
  dockingUrl: string;
  encryption: string;
  mchNO: string;
  placeOrderUrl: string;
  privateKey: string;
  searchBalanceUrl: string;
  searchOrderUrl: string;
}>({
  address: "",
  callbackUrl: "",
  dockingUrl: "",
  encryption: "",
  mchNO: "",
  placeOrderUrl: "",
  privateKey: "",
  searchBalanceUrl: "",
  searchOrderUrl: "",
});

// 加载对接信息
const loadDockingInfo = async () => {
  try {
    const res: any = await getDockingInfo();
    if (res && res.data) {
      info.value = {
        address: res.data.data.address || "",
        callbackUrl: res.data.data.callbackUrl || "",
        dockingUrl: res.data.data.dockingUrl || "",
        encryption: res.data.data.encryption || "",
        mchNO: res.data.data.mchNO || "",
        placeOrderUrl: res.data.data.placeOrderUrl || "",
        privateKey: res.data.data.privateKey || "",
        searchBalanceUrl: res.data.data.searchBalanceUrl || "",
        searchOrderUrl: res.data.data.searchOrderUrl || "",
      };
    }
  } catch (error) {
    console.error("加载对接信息失败:", error);
    ElMessage.error("加载对接信息失败");
  }
};

// 一键复制所有数据
const copyKey = async () => {
  // 构建包含字段名的JSON数据
  const copyData = {
    "商户编号": info.value.mchNO,
    "加密方式": info.value.encryption,
    "登录商户地址": info.value.address,
    "下单地址": info.value.placeOrderUrl,
    "查询地址": info.value.searchOrderUrl,
    "查余额地址": info.value.searchBalanceUrl,
    "下载回调地址": info.value.callbackUrl,
    "在线文档": info.value.dockingUrl,
    "密钥": info.value.privateKey
  };

  const jsonString = JSON.stringify(copyData, null, 2);

  try {
    await navigator.clipboard.writeText(jsonString);
    ElMessage.success("对接信息已复制到剪贴板");
  } catch (error) {
    // 如果现代API不可用，使用传统方法
    const textArea = document.createElement("textarea");
    textArea.value = jsonString;
    document.body.appendChild(textArea);
    textArea.select();
    try {
      document.execCommand("copy");
      ElMessage.success("对接信息已复制到剪贴板");
    } catch (err) {
      ElMessage.error("复制失败，请手动复制");
    }
    document.body.removeChild(textArea);
  }
};

// 初始化
onMounted(() => {
  loadDockingInfo();
});
</script>

<style scoped>
.docking-info {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
}

.info-form {
  margin-top: 20px;
}

.info-form .el-form-item {
  margin-bottom: 20px;
}

.info-form .el-input {
  width: 100%;
}

.info-form .el-textarea {
  width: 100%;
}
</style>
